{% extends 'base_list_detail.html' %}
{% load static %}
{% block title %}天天生鲜-商品详情{% endblock title %}
{% block breadcrumb %}
	<div class="breadcrumb">
		<a href="#">全部分类</a>
		<span>></span>
		<a href="{% url 'goods:list' sku.type.id 1 %}">{{ sku.type.name }}</a>
		<span>></span>
		<a href="#">商品详情</a>
	</div>
{% endblock breadcrumb %}
{% block main_wrap %}
	<div class="goods_detail_con clearfix">
		<div class="goods_detail_pic fl"><img width="100%" src="{{ sku.image.url }}"></div>

		<div class="goods_detail_list fr">
			<h3>{{ sku.name }}</h3>
			<p>{{ sku.desc }}</p>
			<div class="prize_bar">
				<span class="show_pirze">¥<em>{{ sku.price }}</em></span>
				<span class="show_unit">单  位：{{ sku.unite}}</span>
			</div>
			<div class="goods_num clearfix">
				<div class="num_name fl">数 量：</div>

				<div class="num_add fl">
					<input type="text" class="num_show fl" value="1">
					<a href="javascript:;" class="add fr">+</a>
					<a href="javascript:;" class="minus fr">-</a>	
				</div> 
			</div>
			{% if same_spu_skus %}
				<div class="other-unite clearfix" style="margin-top:10px;">
					<span>其他规格:&nbsp;&nbsp;&nbsp;</span>
					{% for sku in same_spu_skus %}
						<a href="{% url 'goods:detail' sku.id %}">{{ sku.name }}</a>
					{% endfor %}
					</ul>
				</div>
			{% endif %}
			<div class="total">总价：<em>{{ sku.price }}元</em></div>
			<div class="operate_btn">
				{% csrf_token %}
				<a href="javascript:;" class="buy_btn">立即购买</a>
				<a href="javascript:;" data-id="{{ sku.id }}" class="add_cart" id="add_cart">加入购物车</a>
			</div>
		</div>
	</div>

	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推荐</h3>
				<ul>
					{% for new_sku in new_skus %}
					<li>
						<a href="{% url 'goods:detail' new_sku.id %}"><img src="{{ new_sku.image.url }}"></a>
						<h4><a href="{% url 'goods:detail' new_sku.id %}">{{ new_sku.name }}</a></h4>
						<div class="prize">￥{{ new_sku.price }}</div>
					</li>
					{% endfor %}
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<ul class="detail_tab clearfix">
				<li class="active">商品介绍</li>
				<li>评论</li>
			</ul>

			<div class="tab_content">
				<dl>
					<dt>商品详情：</dt>
					<dd>{{ sku.goods.detail|safe }}</dd>
				</dl>

			</div>

			<div class="tab_content" style="display:none">
				<dl>
					{% for order in orderGoods %}
						<dt>{{ order.update_time }}&nbsp;&nbsp;&nbsp;&nbsp; {{ order.order.user.name }}</dt>
						<dd>{{ order.comment}}</dd>
					{% empty %}
						<dd>暂无评论</dd>
					{% endfor %}
				</dl>

			</div>

		</div>
	</div>
{% endblock main_wrap %}
{% block buttom %}
	<div class="add_jump"></div>
{% endblock buttom %}
{% block buttomfiles %}
	<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
	<script type="text/javascript">
		var $add_x = $('#add_cart').offset().top;
		var $add_y = $('#add_cart').offset().left;
		var $to_x = $('#show_count').offset().top;
		var $to_y = $('#show_count').offset().left;


		$('#add_cart').click(function(){
			var sku_id = $(this).data("id")
			var count = $(".num_show").val()
			var token = $("input[name='csrfmiddlewaretoken']").val()
			var param = {
				sku_id:sku_id,
				count:count,
				csrfmiddlewaretoken:token
			}
			$.post('/cart/add', param, function(data){
				console.log(data)
				if(data.res==1){
					$(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'})
					$(".add_jump").stop().animate({
						'left': $to_y+7,
						'top': $to_x+7},
						"fast", function() {
							$(".add_jump").fadeOut('fast',function(){
								$('#show_count').html(data.cart_count);
							});
					});
				}else if(data.res==0){
					window.location.href = '/user/login?next=/detail/'+sku_id
				}else{
					alert(data.errmsg)
				}
			})


		})

		$(".add").click(function(){
			var count = parseInt($(".num_show").val())
			count++;
			$(".num_show").val(count)
			getSubPrice()
		})

		$(".minus").click(function(){
			var count = parseInt($(".num_show").val())
			if(count<=1){
				return
			}
			count--;
			$(".num_show").val(count)
			getSubPrice()
		})

		$(".num_show").blur(function(){
			var count =$(this).val()
			if(isNaN(count) || !count.trim() || count<1){
				$(this).val(1)
			}else{
				$(this).val(parseInt(count))
			}
			getSubPrice()
		})

		function getSubPrice(){
			var count =parseInt($(".num_show").val())
			var price = parseFloat($(".show_pirze em").text())
			var sub_price = count*price
			$(".total em").html(sub_price.toFixed(2))
		}

		$(".detail_tab li").click(function(){
			var index = $(".detail_tab li").index(this)
			if(!$(this).hasClass("active")){
				$(this).siblings(".active").removeClass("active")
				$(this).addClass("active")
			}

			$(".tab_content").hide()
			$(".tab_content").eq(index).show()
		})

	</script>
{% endblock buttomfiles %}
